<template>
  <!-- 这个模板用来解决原生video总是浮在最上层的问题，使用view替换video，播放是再替换回，监听一个事件，用来被遮盖时做替换video -->
  <!--增加video标签支持，并循环添加-->
  <view style="width:100%;font-size: 0;" @click="play">
    <video id="myVideo" :class="[node.classStr]" :src="node.attr.url" :style="[node.styleStr,{height: height +'px'}]"
      autoplay :muted="muted" :controls="showControl" :show-fullscreen-btn="showFullBtn" object-fit="cover"
      @loadedmetadata='getHeight' :loop='loop'>
      <view class="control" @click="videoControl(false)" v-if="playState">
      </view>
      <view class="control" @click="videoControl(true)" v-else>
        <image class="playIcon" src="https://100000063-1252208446.file.myqcloud.com/images/pauseIcon.png"></image>
      </view>
      <view class="bottom">
        <text class='text'>触屏可暂停视频</text>
        <image @click.stop="voiceChange" class="mute" :src="muted?meiS:youS"></image>
      </view>
    </video>
  </view>

</template>

<script>
  export default {
    name: 'wxParseVideo',
    props: {
      node: {},
    },
    data() {
      return {
        playState: true,
        videoStyle: 'width: 100%;',
        showFullBtn: false, //是否显示video控制条全屏按钮
        height: '',
        showControl: false,
        muted: true,
        youS: 'https://100000063-1252208446.file.myqcloud.com/images/youS-n.png',
        meiS: 'https://100000063-1252208446.file.myqcloud.com/images/meiS-n.png',
        loop: true
      }
    },
    methods: {
      getHeight(e) {
        let height = e.detail.height
        let width = e.detail.width
        let systemInfo = uni.getSystemInfoSync()
        let screenWidth = systemInfo.screenWidth
        this.height = (height / width) * screenWidth
      },
      videoControl(flag) {
        const myVideo = uni.createVideoContext('myVideo', this);
        if (flag) {
          myVideo.play();
        } else {
          myVideo.pause();
        }
      },
      voiceChange() {
        this.muted = !this.muted
      },
      play() {
        //显示播放器并播放播放器
        this.playState = !this.playState
      },
    },

  };
</script>
<style>
  video::-webkit-media-controls-fullscreen-button {
    display: none;
  }

  video {
    width: 100%;
    position: relative;
  }

  .playIcon {
    width: 128rpx;
    height: 128rpx;
  }

  .control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }

  .text {
    position: absolute;
    color: #C6C6C6;
    font-size: 16rpx;
    line-height: 24rpx;
    left: 40rpx;
    bottom: 28rpx;
    letter-spacing: 1px;

  }

  .mute {
    position: absolute;
    width: 48rpx;
    height: 48rpx;
    right: 32rpx;
    bottom: 16rpx;
    z-index: 3;
  }
</style>
